<template>
	<div>
		<!-- 轮播区域 -->
		<div class="swiper spike-swiper">
		 <ul class="swiper-wrapper">
				<li class="swiper-slide">
					<img src="@/assets/img/swiper3.jpeg" />
				</li>
				<li class="swiper-slide">
					<img src="@/assets/img/swiper2.jfif.png" />
				</li>
				<li class="swiper-slide">
					<img src="@/assets/img/swiper1.jfif.png" />
				</li>
			</ul>
			<div class="swiper-pagination advert_pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
		</div>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	
	export default{
		name:'Spike',
		//4.设置应用swiper的位置以及具体操作
		setup(){
			onMounted(	()=>{
				new Swiper('.spike-swiper',{
					//循环播放
					loop:true,
					//设置分页器效果
					pagination :{
						el:'.advert_pagination'
					},
					//设置播放项：时间，不停止   手指经过不暂停自动
					autoplay :{
						delay: 2800,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					}
				})
			})
		}
	}
</script>

<style scoped>
	/* 轮播区域样式 */
	.spike-swiper{
		width: 100%;
		height: 5.6rem;
	}
	.spike-swiper img{
		width: 100%;
		height: 100%;
	}
	/* 穿透 */
	.advert_pagination :deep(.swiper-pagination-bullet-active){
		background-color:white;
	}
</style>
